<template>
  <div class="email-deploy-box">
    <div class="email-deploy-tips">
      <div></div>
      <div>
        <img v-show="!ifEdit" src="/img/left-menu/edit-blue.png" alt="" @click="showEdit">
      </div>
    </div>
    <div class="email-deploy-list">

      <el-form :model="emailForm" ref="emailForm">

        <el-form-item  :label-width="labelWidth" >
          <span slot="label"> <span class="required">*</span>收件人: </span>
          <el-email
            v-if="ifEdit"
            :activeList="emailForm.addressee"
            :max="10"
            style="width:80%"
          >
          </el-email>
          <div class="email-tag-box" style="width:80%" v-else>
            <el-tag
              :key="tag"
              style="margin-right: 4px;margin-bottom: 1px;"
              v-for="tag in emailForm.addressee"
              :disable-transitions="false"
            >
              {{tag}}
            </el-tag>
          </div>
          
        </el-form-item>

        <el-form-item label="抄送：" :label-width="labelWidth">
          <el-email
            v-if="ifEdit"
            :activeList="emailForm.sendCopy"
            :max="5"
            style="width:80%"
          >
          </el-email>
          <div class="email-tag-box" style="width:80%" v-else>
            <el-tag
              :key="tag"
              style="margin-right: 4px;margin-bottom: 1px;"
              v-for="tag in emailForm.sendCopy"
              :disable-transitions="false"
            >
              {{tag}}
            </el-tag>
          </div>
        </el-form-item>

        <el-form-item label="主题：" :label-width="labelWidth">
          <el-input v-model="emailForm.mainText" disabled ></el-input>
        </el-form-item>

        <el-form-item  :label-width="labelWidth" >
          <span slot="label"> <span class="el-icon-question" :title="`①可设定每月定时发送报告的日期\n②最早为10号，最晚为28号`" ></span> <span class="required">*</span>每月发送日期: </span>
          <el-input-number 
            v-if="ifEdit" 
            v-model="emailForm.sendDay" 
            controls-position="right" 
            :precision="0"
            :step="1" 
            :min="10" 
            :max="28"
          ></el-input-number>
          <span v-else > {{ emailForm.sendDay }} </span>
          <span> 日</span>
        </el-form-item>
        
       

      </el-form>
      
         
    </div>
    <div class="email-deploy-btn" v-show="ifEdit">
      <el-button @click="getEmailConfig">取消</el-button>
      <el-button  type="primary" @click="sendEmailDeploy" :loading="enterLoding">确定</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import elEmail from "@/components/elEmail.vue";

export default {
  name: 'emailDeploy',
  components: { elEmail },
  data() {
    return {
      enterLoding: false,
      ifEdit: false,
      

      configObj: {},
      
      formList: [],

      emailForm: {
        addressee: [],
        sendCopy: [],
        mainText: '',
        sendDay: 10,
        
      },
      labelWidth: '150px',
      addresseeOpt: [],
      
    }
  },
  computed: {
    ...mapGetters(['userInfo' ])
  },
  mounted() {
    this.getEmailConfig();
    this.emailForm.mainText = this.userInfo.cityName + '综合报告';
  },
  methods: {
    getEmailConfig() {
      let params = {
        cityId: this.userInfo.cityId,
        mnc: this.userInfo.mnc,
      }
      this.api.getEmailManage(params)
          .then( res => {
            console.log(res);
            if(res.code == 1) {
              this.emailForm.addressee = res.data.receiverEmail.split(';');
              this.emailForm.sendCopy = res.data.copyToEmail ? res.data.copyToEmail.split(';') : [];
              this.emailForm.sendDay = res.data.sendDay;
              this.ifEdit = false;
            }
          })
    },
    showEdit() {
      this.ifEdit = true;
    },
    sendEmailDeploy() {
      console.log(this.emailForm.addressee);
      this.enterLoding = true;
      if( this.emailForm.addressee.length == 0 ) {
        this.$message({
          message: '请填写至少一个邮箱。',
          type: 'warning'
        })
        return false;
      }
      
      let params = {
        cityId: this.userInfo.cityId,
        mnc: this.userInfo.mnc,
        receiverEmail: this.emailForm.addressee.join(';'),
        copyToEmail: this.emailForm.sendCopy.join(';'),
        sendDay: this.emailForm.sendDay,

      }
      console.log(params);
      this.api.saveEmailManage(params)
          .then( res => {
            console.log(res);
            if( res.code == 1 ) {
              this.enterLoding = false;
              this.getEmailConfig();
            }
          } )
    },
  }
}
</script>

<style lang="scss" scoped>
.email-deploy-box {
  background-color: #fff;
  padding: 10px 20px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-flow: column;
  .email-deploy-tips {
    padding: 5px;
    height: 42px;
    font-size: 18px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    > div > img {
      cursor: pointer;
    }
  }

  .email-deploy-list {
    flex: 1;
    margin: 20px 0;
    padding: 0 20px;
    max-height: calc(100% - 138px);
    overflow-y: auto;

    >ul >li {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
      font-size: 15px;
      > div {
        display: flex;
        flex: 1;
        align-items: center;
      }
      > div:nth-child(1) {
        justify-content: flex-end;
        margin-right: 10px;
      }

      .deploy-input {
        .el-input {
          width: 100px;
        }
        >span {
          margin-left: 10px;
        }
      }
      
    }
    
  }

  .email-deploy-btn {
    padding: 10px;
    text-align: center;
  }
  
}

// 必填项
.required {
  color: red;
  margin-right: 2px;
}

// 未编辑的邮箱地址显示
.email-tag-box {
  display: flex;
  margin-top: 4px;
  padding: 5px;
  flex-wrap: wrap;
  border-radius: 5px;
  box-sizing: border-box;
  align-items: center;
  min-height: 45px;
}

</style>